<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Binding Cell Phone</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1516407_fx9en0nm4fw.css">
    <link rel="stylesheet" href="../../css/shouye.css">
    
    <link rel="stylesheet" href="../../css/iconfont.css">
    <style>
        main{
            width:100%;
            height:880px;
            /* border:1px solid #e7e7e7; */
            margin-top:10px;
        }
        .m-right{
            width:100%;
            height:100%;
            /* border-left: 1px solid #e7e7e7; */
            position: relative;
            /* margin-top: -20px; */
        }
        .m-right h3{
            font:16px/67px "微软雅黑";
            font-weight: 100;
            text-indent: 1em;
            border-bottom: 1px solid #e7e7e7;
        }
        .main{
            width:100%;
        }
        .main .m-top{
            width:95%;
            /* height:350px; */
            margin-left:auto;
             margin-top:20px;
            border-bottom: 1px dashed #e7e7e7;
            overflow: hidden;

        }
        .t-left{
            width:35%;
            float: left;
        }
        .t-left img{
            width:100%;
        }
        .t-right{
            width:60%;
           
            float:right;
        }
        .main .m-bottom{
            width:100%;
            border-bottom:1px solid #e7e7e7
        }
        .main .m-bottom .t-left{
            margin-left:2.03%;
        }
        .main .m-bottom img{
            width:100%;
            height:100%;
        }
        .main .m-bottom img{
            border:1px solid #e7e7e7;
        }
        .main .m-bottom{
            margin-top:50px;
        }
        /* .main .m-top .t-left{
            margin-left:8%;
        } */
        .main .m-bottom .t-left{
            margin-left: 10%;
        }
        .main .m-bottom .t-right,.main .m-bottom .t-left{
            float: left;
        }
        .main .m-top .t-left p,.main .m-top .t-right p,.main .m-bottom .t-left p,.main .m-bottom .t-right p{
            font:16px/56px "微软雅黑";
            color: #666666;
        }
        .main .m-top .t-right,.main .m-bottom .t-right{
            /* margin-left:20.81%; */
            font:14px/38px "微软雅黑";
            color:#747474;
            font-weight: bold;
        }
        .main .m-top .t-right .r-center form,.main .m-bottom .t-right .r-center form{
            float: right;
            margin-right: -2.2%;
            margin-top:5px;
        }
        .main .m-top .t-right .r-bottom{
            margin-top:30px;
        }
        .main .m-bottom .t-right .r-bottom{
            margin-top: 170px;
        }
        .main .m-top .t-right .r-bottom span,.main .m-top .t-right .r-bottom em,.main .m-bottom .t-right .r-bottom span,.main .m-bottom .t-right .r-bottom em{
            float: left;
        }
        .main .m-top .t-right .r-bottom em,.main .m-bottom .t-right .r-bottom em{
            width: 14.5%;
            height:50px;
            background-color: #e4e4e4;
            margin-left: 5.2%;
            text-align: center;
            line-height: 50px;
            color:#d3d3d3;
        }
        .r-center{
            width:100%;
            margin-top:25px;
            overflow: hidden;
        }
        .r-center span{
            width:20%;
            float:left;
           
        }
        .r-center  input{
            width:78%;
            height:130px;
            float: left;
            color:#a9a9a9;
        }
        .bottom .b-left,.bottom .b-right,.bottom form input{
            float: left;
            font:16px/50px "微软雅黑";
            color:#999;
            margin-left:26.2%;
            margin-top:10px;
        }
        .bottom form input{
            width:14.42%;
            height:30px;
            background-color: #f08200;
            color:#fff;
            border:0px;
            border-radius: 7px;
            margin-top:2px;
            line-height: 30px;
            margin-left: 45%;
        }
    </style>
</head>
<body>
    <main id="wrap">
        <div class="m-right">
            <h3>订单评价</h3>
            <div class="main">
                <div class="m-top">
                    <div class="t-left">
                        <img src="../../img/img-JL/HY.png" alt="">
                        <p>珍享 南非进口红心葡萄柚 西柚柚子</p>
                    </div>
                    <div class="t-right">
                        <div class="r-top">
                            <span>商品评分</span>
                            <i class="iconfont icon-start1"></i>
                            <i class="iconfont icon-start1"></i>
                            <i class="iconfont icon-start1"></i>
                            <i class="iconfont icon-xing"></i>
                            <i class="iconfont icon-xing"></i>
                        </div>
                        <div class="r-center">
                                <span>评价商品</span>   
                               <input type="text" class="input">
                           
                        </div>
                        <div class="r-bottom">
                            <span>晒图片</span>
                            <em>
                                <div class="iconfont icon-hao"></div>
                            </em>
                            <em>
                                <div class="iconfont icon-hao"></div>
                            </em>
                            <em>
                                <div class="iconfont icon-hao"></div>
                            </em>
                            <em>
                                <div class="iconfont icon-hao"></div>
                            </em>
                        </div>
                    </div>
                </div>
                <div class="m-top">
                        <div class="t-left">
                            <img src="../../img/img-JL/orange-.png" alt="">
                            <p>珍享 南非进口红心葡萄柚 西柚柚子</p>
                        </div>
                        <div class="t-right">
                            <div class="r-top">
                                <span>商品评分</span>
                                <i class="iconfont icon-start1"></i>
                                <i class="iconfont icon-start1"></i>
                                <i class="iconfont icon-start1"></i>
                                <i class="iconfont icon-xing"></i>
                                <i class="iconfont icon-xing"></i>
                            </div>
                            <div class="r-center">
                                    <span>评价商品</span>   
                                   <input type="text" class="input">
                               
                            </div>
                            <div class="r-bottom">
                                <span>晒图片</span>
                                <em>
                                    <div class="iconfont icon-hao"></div>
                                </em>
                                <em>
                                    <div class="iconfont icon-hao"></div>
                                </em>
                                <em>
                                    <div class="iconfont icon-hao"></div>
                                </em>
                                <em>
                                    <div class="iconfont icon-hao"></div>
                                </em>
                            </div>
                        </div>
                    </div>
                <!-- <div class="m-bottom">
                    <div class="t-left">
                        <img src="../../img/img-JL/orange-.png" alt="">
                        <p>珍享 南非进口红心葡萄柚 西柚柚子</p>
                    </div>
                    <div class="t-right">
                        <div class="r-top">
                            <span>商品评分</span>
                            <i class="iconfont icon-start1"></i>
                            <i class="iconfont icon-start1"></i>
                            <i class="iconfont icon-start1"></i>
                            <i class="iconfont icon-xing"></i>
                            <i class="iconfont icon-xing"></i>
                        </div>
                        <div class="r-center">
                            <span>评价商品</span>
                            <form action="">
                                <textarea name="text" id="" cols="40" rows="5">商品评价表，最少10字，最多50字</textarea>
                            </form>
                        </div>
                        <div class="r-bottom">
                            <span>晒图片</span>
                            <em>
                                <div class="iconfont icon-hao"></div>
                            </em>
                            <em>
                                <div class="iconfont icon-hao"></div>
                            </em>
                            <em>
                                <div class="iconfont icon-hao"></div>
                            </em>
                            <em>
                                <div class="iconfont icon-hao"></div>
                            </em>
                        </div>
                    </div>
                </div> -->
                <div class="bottom">
                    <div class="b-left">
                        <span>服务态度</span>
                        <i class="iconfont icon-start1"></i>
                        <i class="iconfont icon-start1"></i>
                        <i class="iconfont icon-start1"></i>
                        <i class="iconfont icon-xing"></i>
                        <i class="iconfont icon-xing"></i>
                    </div>
                    <div class="b-right">
                        <span>描述相符</span>
                        <i class="iconfont icon-start1"></i>
                        <i class="iconfont icon-start1"></i>
                        <i class="iconfont icon-start1"></i>
                        <i class="iconfont icon-xing"></i>
                        <i class="iconfont icon-xing"></i>
                    </div>
                    <form action="">
                        <input type="submit" value="提交评价">
                    </form>
                </div>
            </div>
        </div>
    </main>
</body>
</html>